<template>
	<view>
		<view v-if="giftInfo.swftype == 1">
			<view class="gift-ani-box">
				<view class="user">
					<text class="txt">{{sendUser.nick_name}}送出 {{giftInfo.gift_name}} X{{giftInfo.giftNum}}</text>
				</view>
				<view class="ani u-text-center">
					<image :src="baseUrl+giftInfo.swf" class="img-ani" mode="aspectFit" />
				</view>
			</view>
		</view>
		<view v-else-if="giftInfo.swftype == 2">
			<view class="gift-ani-box">
				<view class="user">
					<text class="txt">{{sendUser.nick_name}}送出 {{giftInfo.gift_name}} X{{giftInfo.giftNum}}</text>
				</view>
				<div id="svgaCanvas" class="ani u-text-center"></div>
			</view>
		</view>
		<view v-else class="gift-ani">
			<image :src="sendUser.headimgurl ? sendUser.headimgurl : defaultAvatar" mode="scaleToFill" lazy-load="false"
				class="avatar" />
			<view class="u-m-l-20 info-name">
				<view class="nick">{{sendUser.nick_name}}</view>
				<view class="gift">送出 {{giftInfo.gift_name}} X{{giftInfo.giftNum}}</view>
			</view>
			<image :src="baseUrl+giftInfo.gift_img" class="gitf-item u-m-l-20" mode="aspectFit" />
		</view>
	</view>

</template>

<script>
	import SVGA from 'svgaplayerweb';

	export default {
		props: {
			giftInfo: {},
			sendUser: {},
		},
		data() {
			return {
				baseUrl: this.config.baseUrl,
				defaultAvatar: '/static/public/images/headimgurl.jpg',
				svgaPlayer: null,
				svgaParser: null
			}
		},
		methods: {
			showgift() {
				this.$emit('showGift');
			},
			playSVGA(){
				let that = this;
				that.svgaPlayer = new SVGA.Player('#svgaCanvas');
				var parser = new SVGA.Parser('#svgaCanvas'); // 如果你需要支持 IE6+，那么必须把同样的选择器传给 Parser。
				parser.load(this.giftInfo.swf, function(videoItem) {
				    that.svgaPlayer.setVideoItem(videoItem);
				    that.svgaPlayer.startAnimation();
				})
			}
		},
		computed: {},
		mounted() {
			if (this.giftInfo.swftype == 2) {
				this.playSVGA();
			}
		},
		created() {
			let swftime = parseFloat(this.giftInfo.swftime) * 1000;
			setTimeout(() => {
				if (this.giftInfo.swftype == 2) {
					this.svgaPlayer.clearDynamicObjects();
				}
				this.$emit('hideGiftAni')
			}, swftime)
		}
	}
</script>

<style lang="scss">
	.gift-ani-box {
		position: fixed;
		top: 240rpx;
		left: 0;
		width: 100vw;
		height: 60vh;

		.user {
			text-align: center;

			.txt {
				padding: 10rpx 20rpx;
				background: rgba(0, 0, 0, .3);
				border-radius: 40rpx;
				color: #fff;
				font-size: 24rpx;
			}
		}

		.ani {
			width: 100%;
			height: 100%;

			.img-ani {
				width: 100%;
				height: 100%;
			}
		}

	}

	.gift-ani {
		background-image: linear-gradient(270deg,
				rgba(0, 0, 0, 0) 0%,
				rgba(0, 0, 0, 0.18) 100%);
		border-radius: 40rpx;
		border-radius: 40rpx;
		width: 330rpx;
		height: 80rpx;
		position: relative;
	}

	.avatar,
	.info-name {
		display: inline-block;
		vertical-align: middle
	}

	.avatar {
		height: 72rpx;
		width: 72rpx;
		border-radius: 36rpx;
		margin: 4rpx;
	}

	.nick {
		font-family: PingFangSC-Medium;
		font-size: 12px;
		color: #FFFFFF;
		letter-spacing: 0;
		text-align: left;
		line-height: 24rpx;
	}

	.gift {
		font-family: PingFangSC-Regular;
		font-size: 12px;
		color: #FFFFFF;
		letter-spacing: 0;
		text-align: left;
		line-height: 44rpx;
	}

	.gitf-item {
		height: 170rpx;
		width: 93rpx;
		position: absolute;
		left: 280rpx;
		top: 0;
		margin-top: -40rpx
	}
</style>
